<template>
<div class="container">
  <m-header pubtitle="受众群体" :subtitle="subTitle" pubUrl="/swipe.html" />
  <div class="ctx-wrap">
    <div class="ctx-wrap-left">
      <div class="ctx-wrap-left-txt">
        <span class="iconfont iconjibenxinxi icon" />
        属性分布
      </div>
      <div class="ctx-wrap-left-user">
        <img class="ctx-wrap-left-user-img" src="../../assets/avatar.png" />
        <div class="ctx-wrap-left-user-desc">
          <span class="name">{{subTitle}}派</span>
          <span class="count">用户总数: 348934</span>
        </div>
      </div>
      <div class="ctx-wrap-left-echarts">
        <pieComp id="echart1" wrapClass="item-echarts-right" title="受众分布" :width="150" :data="audiencePieData1" @clickLegend="handleClickLegend" />
      </div>
      <div class="ctx-wrap-left-echarts">
        <pieComp id="echart2" wrapClass="item-echarts-right" title="受众分布" :width="150" :data="audiencePieData2" @clickLegend="handleClickLegend" />
      </div>
      <div class="ctx-wrap-left-echarts">
        <pieComp id="echart3" wrapClass="item-echarts-right" title="受众分布" :width="150" :data="audiencePieData3" @clickLegend="handleClickLegend" />
      </div>
    </div>
    <div class="ctx-wrap-right">
      <div class="ctx-wrap-right-echart" id="community"></div>
      <div class="ctx-wrap-right-info">
        <div class="ctx-wrap-right-info-left">
          <div class="ctx-wrap-right-info-left-title">
            <span class="iconfont iconjibenxinxi icon" />
            代表性言论
          </div>
          <commentComp desc="华山小学大队辅导员带领三名港区国安法颁布，遏制了扰乱香港，分裂祖国的反动势力，让香港执法机关终于有法可依。但是香港问题不单单是法律问题，更是社会问题和民心问题。在回归以来，香港社会的舆论长期遭到反动势力把控，让爱国爱港群体无处发声。那...香港问题的由来到底是怎样的呢？我们请到了前港府新闻官冯炜光来和大家一起分享。 少先队员到西光中学考点执..." :forward="1243" :comment="546" :like="2344" />

          <commentComp desc="外交部网站9月2日消息，当地时间9月1日，国务委员兼外长王毅在柏林同德国外长马斯共同会见记者时，有记者再次提及涉港、涉疆等问题。王毅首先用具体数字和事实介绍了中方制定香港国安法完善香港法制环境的正当合理性." :forward="9333" :comment="2389" :like="9787" />

          <commentComp desc="区议员的责职，是政府的政策上情下达，服务本区市民，而这届区议员现在每天忙碌的事是专门与政府对着干，且越来越离谱，这不是颠覆政府是什么？国安法里颠覆政府该当何罪？？？？去好好读一读港版国安法！！！" :forward="65677" :comment="347" :like="2344" />
        </div>
        <div class="ctx-wrap-right-info-right">
          <div class="ctx-wrap-right-info-right-title">
            <span class="iconfont iconjibenxinxi icon" />
            代表性人物
          </div>
          <div class="ctx-wrap-right-info-right-item">
            <img class="ctx-wrap-right-info-right-item-img" src="../../assets/avatar.png" />
            <div class="ctx-wrap-right-info-right-item-desc">
              <span class="desc-title">Twitter</span>
              <div class="ctx-wrap-right-info-right-item-value">
                <span class="ctx-title">影响力</span>
                <!-- <span class="ctx-progress"></span> -->
                <el-progress class="ctx-progress" :percentage="50" :show-text="false" :stroke-width="10" color="#5673ff"></el-progress>
                <span class="ctx-value">23423</span>
              </div>
            </div>
          </div>

          <div class="ctx-wrap-right-info-right-item">
            <img class="ctx-wrap-right-info-right-item-img" src="../../assets/avatar.png" />
            <div class="ctx-wrap-right-info-right-item-desc">
              <span class="desc-title">Twitter</span>
              <div class="ctx-wrap-right-info-right-item-value">
                <span class="ctx-title">影响力</span>
                <!-- <span class="ctx-progress"></span> -->
                <el-progress class="ctx-progress" :percentage="50" :show-text="false" :stroke-width="10" color="#5673ff"></el-progress>
                <span class="ctx-value">23423</span>
              </div>
            </div>
          </div>

          <div class="ctx-wrap-right-info-right-item">
            <img class="ctx-wrap-right-info-right-item-img" src="../../assets/avatar.png" />
            <div class="ctx-wrap-right-info-right-item-desc">
              <span class="desc-title">Twitter</span>
              <div class="ctx-wrap-right-info-right-item-value">
                <span class="ctx-title">影响力</span>
                <!-- <span class="ctx-progress"></span> -->
                <el-progress class="ctx-progress" :percentage="50" :show-text="false" :stroke-width="10" color="#5673ff"></el-progress>
                <span class="ctx-value">23423</span>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import mHeader from 'components/mHeader'
import commentComp from '@/components/commentComp';
import pie from '@/components/echarts/pie.vue'
import {
  getRequest
} from '@/utils/index';
import '../../styles/common/index.scss'
import './swipe.scss'
export default {
  name: 'swipe',
  components: {
    mHeader,
    commentComp,
    pieComp: pie,
  },
  data() {
    return {
      subTitle: '',
      audiencePieData1: [{
          value: 207438,
          name: 'Twitter龄 < 1',
          rate: '75%'
        },
        {
          value: 310,
          name: '1 < witter龄 < 3',
          rate: '17%'
        },
        {
          value: 22127,
          name: '3 < witter龄',
          rate: '6%'
        }
      ],
      audiencePieData2: [{
          value: 207438,
          name: '已认证',
          rate: '75%'
        },
        {
          value: 47019,
          name: '未认证',
          rate: '17%'
        }
      ],
      audiencePieData3: [{
          value: 207438,
          name: '粉丝数<999',
          rate: '75%'
        },
        {
          value: 47019,
          name: '999 < 粉丝数 < 9999',
          rate: '17%'
        },
        {
          value: 22127,
          name: '9999 < 粉丝数',
          rate: '8%'
        }
      ],
    }
  },
  mounted() {
    this.drawCommEcharts();
    const subTitle = getRequest('subTitle');
    console.log(subTitle);
    this.subTitle = subTitle;
  },
  methods: {
    handleClickLegend(name) {
      console.log('name', name);
    },
    drawCommEcharts() {
      const myCharts = this.$echarts.init(document.getElementById('community'));

      let dataRel = [{
        name: '我们没有放弃为香港争取民主',
        draggable: true, // 是否可以拖拽，默认false
        category: 0, // 这是种类，运维1测试2应用3实施4开发5
        number: 0, // 这是编号 非必须，目的仅为方便编写line
        value: [300, 100], //图形大小
        symbolSize: 80,
        showNum: 25, //节点需要显示的额外内容
      }, {
        name: '环境因子',
        number: 1,
        category: 1,
        draggable: true,
        value: 40,
        showNum: 35,
        label: {
          show: false
        }
      }, {
        name: '物质',
        number: 2,
        category: 1,
        draggable: true,
        value: 45,
        showNum: 35,
        label: {
          show: false
        }
      }, {
        name: '生物',
        number: 3,
        category: 1,
        draggable: true,
        value: 45,
        showNum: 35,
        label: {
          show: false
        }
      }, {
        name: '香港已不能在自由市场竞争',
        number: 4,
        category: 1,
        draggable: false,
        value: [300, 100],
        symbolSize: 80,
        showNum: 35
      }, {
        name: '浮游植物',
        number: 5,
        category: 3,
        draggable: true,
        value: 45,
        showNum: 35,
        label: {
          show: false
        }
      }, {
        name: '浮游动物',
        number: 6,
        category: 3,
        draggable: true,
        value: 45,
        showNum: 35,
        label: {
          show: false
        }
      }, {
        name: '原生生物',
        number: 7,
        category: 2,
        draggable: true,
        value: 45,
        showNum: 35,
        label: {
          show: false
        }
      }, {
        name: '细菌',
        number: 8,
        category: 2,
        draggable: true,
        value: 45,
        showNum: 35,
        label: {
          show: false
        }
      }, {
        name: '灾害事件',
        number: 9,
        category: 1,
        draggable: true,
        value: 45,
        showNum: 35,
        label: {
          show: false
        }
      }, {
        name: '赤潮',
        number: 10,
        category: 2,
        draggable: true,
        value: 45,
        showNum: 35,
        label: {
          show: false
        }
      }, {
        name: '水母灾害',
        number: 11,
        category: 2,
        draggable: true,
        value: 35,
        showNum: 35,
        label: {
          show: false
        },
      }, {
        name: '中国香港国安立法无可非议',
        number: 12,
        category: 2,
        draggable: false,
        value: [300, 100],
        symbolSize: 80,
        showNum: 35
      }]
      let dataLink = [{
        source: 0, // 可以用name 可以用number，但name不能重名
        target: 1,
        value: '一级'
      }, {
        source: 0, // 可以用name 可以用number，但name不能重名
        target: 2,
        value: '一级'
      }, {
        source: 0, // 可以用name 可以用number，但name不能重名
        target: 3,
        value: '一级'
      }, {
        source: 0, // 可以用name 可以用number，但name不能重名
        target: 9,
        value: '一级'
      }, {
        source: 3, // 可以用name 可以用number，但name不能重名
        target: 4,
        value: '二级-生物'
      }, {
        source: 3, // 可以用name 可以用number，但name不能重名
        target: 7,
        value: '二级-生物'
      }, {
        source: 3, // 可以用name 可以用number，但name不能重名
        target: 8,
        value: '二级-生物'
      }, {
        source: 4, // 可以用name 可以用number，但name不能重名
        target: 5,
        value: '三级-灾害事件'
      }, {
        source: 4, // 可以用name 可以用number，但name不能重名
        target: 6,
        value: '三级-灾害事件'
      }, {
        source: 9, // 可以用name 可以用number，但name不能重名
        target: 10,
        value: '二级-灾害事件'
      }, {
        source: 9, // 可以用name 可以用number，但name不能重名
        target: 11,
        value: '二级-灾害事件'
      }, {
        source: 12, // 可以用name 可以用number，但name不能重名
        target: 9,
        value: '测试连接'
      }, ]
      const option = {
        title: {
          text: "分子社区",
          top: "20",
          left: "40",
          textStyle: {
            color: '#e6e9f5',
            fontSize: 17,
            fontWeight: 'bold'
          }
        },
        tooltip: {},
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        // legend: {
        //   x: "center",
        //   show: false,
        //   data: [] // 此处不显示根节点学生
        // },
        series: [{
          name: "分子社区",
          type: "graph",
          layout: "force", // 布局方式  none  force circular
          roam: true,
          focusNodeAdjacency: true,
          itemStyle: {
            borderColor: '#fff',
            borderWidth: 1,
            shadowBlur: 10,
            shadowColor: 'rgba(0, 0, 0, 0.3)'
          },
          edgeSymbolSize: [4, 10],
          label: {
            position: 'center',
            formatter: '{b}'
          },
          lineStyle: {
            color: 'source',
            curveness: 0.3
          },
          emphasis: {
            lineStyle: {
              width: 10
            }
          },
          force: {
            repulsion: [300, 600],
            layoutAnimation: true,
            gravity: 0.11,
            edgeLength: [10, 50],
            friction: 0.6,
            focusNodeAdjacency: true,
          },
          label: {
            normal: {
              show: true,
              textStyle: {
                fontSize: 14
              },
            }
          },
          // symbolSize: function (size) {
          //   return size;
          // },
          // edgeSymbol: ['circle', 'circle'],
          // edgeSymbolSize: [4, 10],
          // edgeLabel: {
          //   normal: {
          //     show: true,
          //     textStyle: {
          //       fontSize: 10
          //     },
          //     formatter: "{c}"
          //   }
          // },
          // force: {
          //   repulsion: 30,
          //   layoutAnimation: true,
          //   gravity: 0.11,
          //   edgeLength: 50,
          //   friction: 0.63
          // },
          legendHoverLink: true,
          // circular: {
          //   rotateLabel: false
          // },

          // roam: "scale",
          // symbolRotate: 10,
          // symbolKeepAspect: true,
          // symbolOffset: [0, 4],
          // force: {
          //   repulsion: 2500,
          //   edgeLength: [10, 50]
          // },
          // focusNodeAdjacency: true,
          // roam: true,
          // categories: [{
          //   name: '用户',
          // }, {
          //   name: '话题',
          // }, {
          //   name: '测试',
          // }, {
          //   name: '应用',
          // }, {
          //   name: '实施',
          // }, {
          //   name: '开发',
          // }],

          // force: {
          //   repulsion: 1000
          // },
          // tooltip: {
          //   formatter: function (node) { // 区分连线和节点，节点上额外显示其他数字
          //     if (!node.value) {
          //       return node.data.name;
          //     } else {
          //       return node.data.name + ":" + node.data.showNum;
          //     }
          //   },
          // // },
          // lineStyle: {
          //   normal: {
          //     opacity: 0.9,
          //     width: 1,
          //     curveness: 0.3
          //   }
          // },
          data: dataRel,
          links: dataLink
        }]
      };

      myCharts.on('click', (params) => {
        const {
          name
        } = params;
        console.log(11111, name);
        // this.$emit('clickBar', name);
      })
      myCharts.setOption(option);
    }
  }
}
</script>
